<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { User, Lock, View, Hide } from "@element-plus/icons-vue";
import { userRegisterService } from "@/server/user"; // 假设有一个 userRegisterService 用于注册
import { useRouter } from "vue-router";
const router = useRouter();
const registerForm = ref({
  username: "",
  password: "",
  password2: "",
});
const register = async () => {
  try {
    if (
      registerForm.value.username == null ||
      registerForm.value.username.trim() === ""
    ) {
      ElMessage.error("请输入用户名");
      return;
    } else if (
      registerForm.value.password == null ||
      registerForm.value.password.trim() === ""
    ) {
      ElMessage.error("请输入密码");
      return;
    } else if (
      registerForm.value.password2 == null ||
      registerForm.value.password2.trim() === ""
    ) {
      ElMessage.error("请再次确认密码");
      return;
    }
    if (registerForm.value.password !== registerForm.value.password2) {
      ElMessage.error("两次输入的密码不一致");
      return;
    }
    const result = await userRegisterService(registerForm.value);

    if (result || result.success) {
      // 假设返回结果中有 success 字段表示注册是否成功
      ElMessage.success("注册成功");
      await router.push("/"); // 注册成功后跳转到登录页面
    } else {
      ElMessage.error("注册失败：" + (result.message || "未知错误"));
    }
  } catch (e) {
    console.log(e);
    ElMessage.error("注册失败");
    confirm("用户已存在");
  }
};
const back = () => {
  router.back();
};
const showpassword = ref(false);
const togglepassword = () => {
  showpassword.value = !showpassword.value;
};
const showPassword2 = ref(false);
const togglePassword2 = () => {
  showPassword2.value = !showPassword2.value;
};
</script>

<template>
  <div class="background">
    <div style="margin-left: 40%">
      <div class="form">
        <span style="width: 100%; display: flex; justify-content: center">
          <img src="@/assets/pictor/tcl.png" width="80" height="50" />
          <h1 style="font-size: 50px;margin-left: 15px; margin-top: -10px; margin-bottom: 5px">
            注册
          </h1>
        </span>
        <el-form status-icon :model="registerForm">
          <el-form-item prop="username" class="form-item">
            <el-input
              :prefix-icon="User"
              v-model="registerForm.username"
              placeholder="请输入账号"
              type="text"
              style="
                width: 80%;
                height: 80px;
                margin-left: 60px;
                font-size: 30px;
              "
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="form-item">
            <el-input
              :prefix-icon="Lock"
              v-model="registerForm.password"
              placeholder="请输入密码"
              :type="showpassword ? 'text' : 'password'"
              style="
                width: 80%;
                height: 80px;
                margin-left: 60px;
                font-size: 30px;
                margin-top: -20px;
              "
            >
              <template #append>
                <el-icon v-if="showpassword" @click="togglepassword">
                  <View
                /></el-icon>
                <el-icon v-else @click="togglepassword"> <Hide /> </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="form-item">
            <el-input
              :prefix-icon="Lock"
              v-model="registerForm.password2"
              placeholder="请再次输入密码"
              :type="showPassword2 ? 'text' : 'password'"
              style="
                width: 80%;
                height: 80px;
                margin-left: 60px;
                font-size: 30px;
                margin-top: -20px;
              "
            >
              <template #append>
                <el-icon v-if="showPassword2" @click="togglePassword2">
                  <View
                /></el-icon>
                <el-icon v-else @click="togglePassword2"> <Hide /> </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="button"
              type="primary"
              auto-insert-space
              @click="register"
              style="
                width: 80%;
                height: 80px;
                margin-left: 65px;
                margin-top: -10px;
                font-size: 30px;
              "
              >确认注册</el-button
            >
            <el-button
              type="text"
              style="font-size: 15px; margin-left: 60px; color: #55aaff"
              @click="back"
            >
              <返回
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.custom-size .el-checkbox__input {
  transform: scale(2);
  /* 放大两倍 */
}
.form-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-form-item__error {
  position: absolute;
  right: -200px;
  /* 调整这个值来改变提示信息的位置 */
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

.el-input__suffix {
  display: none;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 确保所有元素的内边距和边框不会影响宽度 */
}

html,
body {
  height: 100%;
  /* 确保 html 和 body 高度为 100% */
}

.background {
  background-image: url("@/assets/pictor/login.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 600px;
  padding: 60px;
  border-radius: 8px;
  background-color: #fff;

  .title {
    text-align: center;
    margin-bottom: 20px;
  }

  .button {
    width: 100%;
    margin-top: -20px;
  }

  .el-form-item {
    margin-bottom: 50px;
    /* 增加表单项之间的间距 */
  }

  .flex {
    width: 100%;
    height: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    margin-top: -50px;
  }
}
</style>
